import React from 'react';

const MinimalTest = () => {
  console.log('MinimalTest component rendered');
  
  return (
    <div style={{
      padding: '20px',
      background: '#f0f2f5',
      minHeight: '100vh',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center'
    }}>
      <div style={{
        background: 'white',
        padding: '40px',
        borderRadius: '8px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
        textAlign: 'center'
      }}>
        <h1 style={{ color: '#1890ff', marginBottom: '20px' }}>最小测试组件</h1>
        <p style={{ color: '#666', marginBottom: '20px' }}>如果你能看到这个页面，说明React基础功能正常</p>
        <div style={{
          background: '#f6ffed',
          border: '1px solid #b7eb8f',
          borderRadius: '4px',
          padding: '10px',
          marginBottom: '20px'
        }}>
          <p style={{ margin: 0, color: '#52c41a' }}>✓ React渲染正常</p>
          <p style={{ margin: 0, color: '#52c41a' }}>✓ CSS样式正常</p>
          <p style={{ margin: 0, color: '#52c41a' }}>✓ JavaScript执行正常</p>
        </div>
        <button 
          onClick={() => {
            console.log('按钮点击测试');
            alert('交互功能正常！');
          }}
          style={{
            padding: '10px 20px',
            background: '#1890ff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer',
            fontSize: '14px'
          }}
        >
          测试交互功能
        </button>
      </div>
    </div>
  );
};

export default MinimalTest;